<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model 表单输入绑定</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.js"></script>
    <!--<script type="text/javascript" src="../../js/vue.global.js"></script>-->

</head>
<body>
<!--vue 应用实例挂载到此ID上，这样它及其下面的标签才能使用 vue 语法获取数据-->
<div id="rootApp" style="margin: 50px; font-size: 18px">
    <h3>v-model 表单输入绑定</h3>
    <p>
        1、v-text、v-htm 是单向绑定，数据影响了视图泻染，v-model 是双向绑定，视图 (View) 和模型 (Model) 之间会互相影响。<br/>
        2、目前 v-model 可使用元素有：input、Select、textarea、checkbox、radio、components (Vue中的自定义组件)。<br/>
        3、v-model 会根据所使用的元素自动使用对应的 DOM 属性和事件组合：<br/>
    <ul>
        <li>文本类型的 input 和 textarea 元素会绑定 value 属性并侦听 input 事件；</li>
        <li>checkbox 和 radio 会绑定 checked 属性并侦听 change 事件；</li>
        <li>select 会绑定 value 属性并侦听 change 事件。</li>
    </ul>
    4、 注意：v-model 会忽略任何表单元素上初始的 value、checked 或 selected 属性。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。应该在 JavaScript 中使用 data
    选项来声明该初始值。
    </p>

    <h4>文本</h4>
    <p>如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符。</p>
    家庭住址：<input type="text" v-model.trim="home_address" placeholder="edit me"/><br/>
    <p>您输入的是: {{ home_address }}</p><br/>

    <h4>多行文本</h4>
    <p>注意在 textarea 中是不支持插值表达式的，即不能使用插值表达式为 textarea 赋值，可以使用 v-model 来替代。</p>
    <textarea v-model="user_suggest" placeholder="请输入您的建议..."></textarea>
    <p style="white-space: pre-line;">{{ user_suggest }}</p>

    <h4>复选框</h4>
    <p>多个复选框绑定的是同一个数组或集合的值。</p>
    请选择您认为优秀的足球队：
    中国<input type="checkbox" value="中国" v-model="check_football">
    阿根廷<input type="checkbox" value="阿根廷" v-model="check_football">
    西班牙<input type="checkbox" value="西班牙" v-model="check_football"><br>
    您选择的结果是：{{check_football}}<br><br>

    <p>单一的复选框，绑定布尔类型值。</p>
    是否接种疫苗：<input type="checkbox" id="checkbox" v-model="is_vaccination"/>
    <label for="checkbox">{{ is_vaccination }}</label>

    <h4>单选按钮</h4>
    <div>Picked: {{ is_agree }}</div>
    是否接受协议：
    <input type="radio" id="yes" value="yes" v-model="is_agree"/>
    <label for="yes">是</label>

    <input type="radio" id="no" value="no" v-model="is_agree"/>
    <label for="no">否</label>

    <h4>单选-下拉选择器</h4>
    <div>Selected: {{ check_football_star }}</div>
    <select v-model="check_football_star">
        <option disabled value="">请选择你最喜欢的球星</option>
        <option>马拉多纳</option>
        <option>梅西</option>
        <option>C罗</option>
    </select>

    <h4>多选-下拉选择器</h4>
    <p>多选 (值绑定到一个数组)</p>
    <div>Selected: {{ check_female_stars }}</div>
    <select v-model="check_female_stars" multiple>
        <option disabled value="">请选择你最喜欢的小花</option>
        <option>迪丽热巴</option>
        <option>古力娜扎</option>
        <option>贾媛媛</option>
    </select>


</div>
</body>

<script type="text/javascript">

    // 1、每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始, 用来在应用中注册"全局"组件
    // 2、传递给 createApp 的选项用于配置根组件
    // 3、应用实例暴露的大多数方法都会返回该同一实例，方便链式编程
    const App = Vue.createApp({
        //组件选项
        // data 定义数据, html 中可以进行获取
        data() {
            return {
                check_football: [],
                home_address: "",
                user_suggest: "",
                is_vaccination: null,
                is_agree: null,
                check_football_star: "C罗",
                check_female_stars: []
            }
        }
    });

    // 4、一个应用需要被挂载(mount)到一个 DOM 元素中，当挂载(mount)应用时，该组件被用作渲染的起点
    // 5、与大多数应用方法不同的是 mount 不返回应用本身，而是返回的根组件实例(vm)
    const rootViewModel = App.mount("#rootApp");
    console.log(rootViewModel.author);

</script>
</html>
